<template>
    <div class="paddingTop search_page">
        <head-top head-title="搜索" goBack="true"></head-top>
        <form class="search_from">
            <input type="search" name="search" placeholder="请输入书名、作者"
                class="search_input" v-model="searchValue" @input="checkInput">
            <input type="submit" name="submit" class="search_submit"
                @click.prevent="searchTarget('')">
        </form>
        <section v-if="restaurantList.lenght">
          <h4 class="title_restaurant">书单</h4>
          <ul class="list_container">
            <router-link :to="{path:'/login',query:{id:item.id}}" tag="li" v-for="item in restaurantList"
              :key="item.id" class="list_li">
              <section class="item_left">
                <img :src="imgBaseUrl + item.image_path" class="restaurant_img">
              </section>
              <section class="item_right">
                <div class="item_right_text">
                  <p>
                    <span>{{item.name}}</span>
                    <span>{{item.author}}著</span>
                  </p>
                  <p>评分 5 星</p>
                  <p>类型：玄幻</p>
                </div>
              </section>
            </router-link>
          </ul>
        </section>

        <section class="search_history" v-if="searchHistory.lenght&&showHistory">
            <h4 class="title_restaurant">搜索历史</h4>
            <ul>
                <li v-for="(item,index) in searchHistory" :key="index" class="history_list">
                    <span class="history_text ellipsis" @click="searchTarget(item)">{{item}}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="delete_icon" @click="deleteHistory(index)">
                        <line x1="8" y1="8" x2="18" y2="18" style="stroke:#999;stroke-width:3" />
                        <line x1="18" y1="8" x2="8" y2="18" style="stroke:#999;stroke-width:3" />
                    </svg>
                </li>
            </ul>
            <footer class="clear_history" @click="clearAllHistory">清空搜索历史</footer>
        </section>
        <div class="search-none" v-if="emptyResult">没有搜索结果</div>
        <foot-guide></foot-guide>
    </div>
</template>

<script>
    import headTop from '../../../components/header/head'
    import footGuide from '../../../components/footer/footGuide.vue'
    import {getStore,setStore} from '../../../config/mUtils'
    import {searchRestaurant} from '../../../service/getData'
    import {imgBaseUrl} from '../../../config/env'
    export default {
        data(){
            return{
                geohash: '', // msite页面传递过来的地址信息
                searchValue:'',//搜索内容
                restaurantList:[],//搜索返回的结果
                searchHistory:[],//搜索历史记录
                showHistory:true,//是否显示历史记录
                emptyResult:false,//搜索为空时显示
            }
        },
        created(){

        },
        mounted(){
          this.geohash=this.$route.params.geohash;
          //获取搜索历史记录
          if(getStore('searchHistory')){
            this.searchHistory=JSON.parse(getStore('searchHistory'));
          }
        },
        components:{
          headTop,footGuide
        },
        methods:{
          //点击提交按钮，搜索结果并显示，同时将搜索内容存入历史记录
          async searchTarget(historyValue){
              if(historyValue){
                this.searchValue=historyValue;
              }else if(!this.searchValue){
                return
              }
              //隐藏历史记录
              this.showHistory = false;
              //获取搜索结果
              this.restaurantList = await searchRestaurant(geohash,this.searchValue);
              this.emptyResult = !this.restaurantList.length;
            /**
             * 点击搜索结果，进入下一页面时进行判断是否已经有一样的历史记录
             * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
             */
            let history = getStore('searchHistory');
            if(history){
                let checkrepeat = false;
                this.searchHistory = JSON.parse(history);
                this.searchHistory.forEach(item =>{
                    if(item==this.searchHistory){
                      checkrepeat=true;
                    }
                })
              if(!checkrepeat){
                  this.searchHistory.push(this.searchValue);
              }
            }else{
                this.searchHistory.push(this.searchValue);
            }
            setStore('searchHistory',this.searchHistory);
          },
          //搜索结束后，删除搜索内容直到为空时，清空搜索结果，并显示历史记录
          checkInput(){
              if(this.searchValue===''){
                this.showHistory=true;//显示历史记录
                this.restaurantList = [];//清空搜索结果
                this.emptyResult = false;//隐藏搜索为空的提示
              }
          },
          //点击删除按钮，删除当前历史记录
          deleteHistory(index){
            this.searchHistory.splice(index,1);
            setStore('searchHistory',this.searchHistory);
          },
          //所有的历史记录
          clearAllHistory(){
            this.searchHistory =[];
            setStore('searchHistory',this.searchHistory);
          }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../assets/styles/mixin";

    .search_page{
      margin-bottom: 2rem;
    }

    .search_from{
        background-color: #fff;
        padding: 0.5rem;
        margin-top: 2rem;
        display: flex;
        input{
            height: 1.5rem;
        }
        .search_input{
            flex: 4;
            border:0.025rem solid $bc;
            @include sc(0.65rem,#333);
            border-radius: 0.125rem;
            background-color: #f2f2f2;
            /*font-weight:bold;*/
            padding:0 0.25rem;
        }
        .search_submit{
            flex:1;
            border:0.125rem solid $red;
            margin-left: .2rem;
            @include sc(0.65rem,#fff);
            border-radius: 0.125rem;
            background-color: $red;
            /*font-weight:bold;*/
            padding:0 0.25rem;
        }
    }

    .title_restaurant{
      font-size: 0.6rem;
      line-height: 2rem;
      text-indent:0.5rem;
      font-weight:bold;
      color:#666;
    }

    .list_container{
      background-color:#fff;
    }

    .list_li{
      display: flex;
      justify-content: center;
      padding: 0.5rem;
      border-bottom:0.025rem solid $bc;
      .item_left{
        margin-right: 0.25rem;
        .restaurant_img{
          @include wh(1.7rem,1.7rem);
        }
      }
      .item_right{
        font-size: 0.55rem;
        flex:1;
        .item_right_text{
          padding-bottom: 0.25rem;
          border-bottom: 0.025rem solid $bc;
          p{
            line-height: 0.9rem;
          }
        }
      }

    }





    .search_history{
        margin: 0 auto;
        @include font(0.65rem,1.75rem);
        color: #333;
        background-color: #fff;
        text-align: center;
        margin-top: 0.125rem;
    }
</style>
